Safe Area#

Safe area modifiers in Scripting allow you to adjust layout behavior relative to the system-defined safe areas, such as the areas around notches, toolbars, or the on-screen keyboard.

safeAreaPadding#

Adds custom padding inside the safe area of a view. This modifier adjusts the visible content region by extending or inseting from the edges defined by the system’s safe area (e.g., accounting for the notch, home indicator, or rounded corners).

Type#

1safeAreaPadding?: 
2  true | 
3  number | 
4  {
5    horizontal?: number | true
6    vertical?: number | true
7    leading?: number | true
8    trailing?: number | true
9    top?: number | true
10    bottom?: number | true
11  }

Description#

This modifier gives fine-grained control over how much padding should be added inside the safe area for specific edges or directions. You can either apply:

• A default system padding by passing true
• A uniform padding value by passing a number
• Directional padding for each edge using a detailed configuration object

This modifier is particularly useful when you want the view to respect or override the system safe area while maintaining proper layout spacing.

Usage Options#

• true: Applies default system padding on all safe area edges
• number: Applies the specified number of points as uniform padding on all edges
• object: Specifies padding per edge or direction

Object Properties#

• horizontal: Padding for both leading and trailing edges
• vertical: Padding for both top and bottom edges
• leading, trailing, top, bottom: Individual edge-specific padding
• Values can be a number or true to apply system default padding for that edge

Example: Default Padding#

1<VStack safeAreaPadding={true}>
2  <Text>Hello</Text>
3</VStack>

Applies system default padding on all safe area edges.

Example: Custom Padding#

1<VStack
2  safeAreaPadding={{
3    top: 20,
4    bottom: true,
5    horizontal: 12
6  }}
7>
8  <Text>Content</Text>
9</VStack>

Adds 20 points of padding at the top, system default padding at the bottom, and 12 points on both horizontal edges.

safeAreaInset#

Inserts a custom view into the safe area edge of another view.

Type#

1safeAreaInset?: {
2  top?: {
3    alignment?: HorizontalAlignment
4    spacing?: number
5    content: VirtualNode
6  },
7  bottom?: {
8    alignment?: HorizontalAlignment
9    spacing?: number
10    content: VirtualNode
11  },
12  leading?: {
13    alignment?: VerticalAlignment
14    spacing?: number
15    content: VirtualNode
16  },
17  trailing?: {
18    alignment?: VerticalAlignment
19    spacing?: number
20    content: VirtualNode
21  }
22}

Description#

• Adds content (such as toolbars, controls, or info bars) to the specified safe area edge: top, bottom, leading, or trailing.
• You can control alignment (horizontal or vertical) and spacing between the original view and the inserted content.
• Typically used in scrollable or full-screen layouts where you want to place persistent UI elements without obstructing core content.

Example#

1<ScrollView
2  safeAreaInset={{
3    bottom: {
4      alignment: "center",
5      spacing: 8,
6      content: <Text>Toolbar here</Text>
7    }
8  }}
9>
10  <VStack>
11    <Text>Scrollable content</Text>
12  </VStack>
13</ScrollView>

Alignment Options#

• Horizontal (for top and bottom): "leading", "center", "trailing"
• Vertical (for leading and trailing): "top", "center", "bottom"

Notes#

• spacing is optional. If omitted, a default system spacing will be applied.
• The spacing typo in the leading/trailing definition should be interpreted as spacing.

ignoresSafeArea#

Expands a view’s content to extend into one or more safe area regions.

Type#

1ignoresSafeArea?: boolean | {
2  regions?: SafeAreaRegions
3  edges?: EdgeSet
4}

Description#

• Allows a view to "ignore" the system-defined safe areas and occupy the full screen or extend under system UI.
• Useful for immersive layouts like full-screen images, maps, or background layers.

Boolean Usage#

1<Image
2  imageUrl="https://example.com/background.jpg"
3  ignoresSafeArea
4/>

This will ignore all safe area regions on all edges.

Object Usage#

1<VStack
2  ignoresSafeArea={{
3    regions: "all",
4    edges: "bottom"
5  }}
6>
7  <Text>Bottom edge extends under home indicator</Text>
8</VStack>

regions (optional)#

edges (optional)#